<template>
    <div class="flex flex-col md:flex-row md:gap-x-5">
        <dl class="md:grow">
            <dt class="flex">
                <span class="grow">最新代办</span>
                <span>
                    <RouterLink to="/todos">>></RouterLink>
                </span>
            </dt>
            <dd v-for="todo in todos" class="flex border-b gap-x-2">
                <span class="grow">{{ todo.title }}</span>
                <span>{{ todo.completed ? '已完成' : '未完成' }}</span>
            </dd>
        </dl>
        <dl class="md:grow">
            <dt class="flex">
                <span class="grow">最新用户</span>
                <span>
                    <RouterLink to="/users">>></RouterLink>
                </span>

            </dt>
            <dd v-for="user in users" class="flex border-b gap-x-2">
                <span class="grow">{{ user.userName }}</span>
                <span><button>编辑</button></span>
            </dd>
        </dl>

    </div>
</template>

<script setup lang="ts">
import { getHomeData } from '~/api'

// 使用 useAsyncData 获取数据
const { data: res } = await useAsyncData("index", () => getHomeData());

// 初始化 todos 和 users
const todos = ref(res.value?.data.todos || []);
const users = ref(res.value?.data.users || []);

// let todos = ref<Todo[]>([])
// let users = ref<User[]>([])
// async function fetchData() {
//     try {
//         let { data: res } = await useAsyncData("index",() => getHomeData());
//         // console.log(res.data.value)
//         todos.value = res.value?.data.todos||[]
//         users.value = res.value?.data.users||[]

//     } catch (error) {

//     }
// }
// fetchData()
</script>

<style scoped></style>